<template>
	<view>
		<view class="banner"><image src="https://jewel.gdhenglang.com/static/images/diy_banner.jpg"></image></view>
		<view class="content">
			<view class="li update-img">
				<view class="name">珠宝图片</view>
				<view class="images-content">
					<view class="tipes-num">{{imageList.length}}/5</view>
					<view class="images-list">
						<block v-for="(image,index) in imageList" :key="index">
							<view class="image-file">
								<image src="../../../static/icons/jewel/close_diy.png" @tap="delete_img(image.url, index)" class="close_diy" mode=""></image>
								<image class="image" :src="image.temp" :data-src="image.temp" @tap="previewImage"></image>
							</view>
						</block>
						<view class="add-image" @tap="chooseImage">+</view>
					</view>
				</view>
			</view>
			<view class="li">
				<view class="name">商品名称:</view>
				<view class="input">
					<input class="uni-input" type="text" v-model="goods_name" placeholder="请填写商品名称" />
				</view>
			</view>
			<view class="li">
				<view class="name">购买数量:</view>
				<view class="input">
					<input class="uni-input" type="number" v-model="num" placeholder="请填写购买数量" />
				</view>
			</view>
			<view class="li">
				<view class="name">价格:</view>
				<view class="input">
					<input class="uni-input" type="number" v-model="goods_price" placeholder="请填写价格" />
				</view>
			</view>
			<view class="li">
				<view class="name">克重:</view>
				<view class="input">
					<input class="uni-input" type="number" v-model="weight" placeholder="请填写克重,选填" />
				</view>
				<view class="unit">/g</view>
			</view>
			<view class="li">
				<view class="name">分类:</view>
				<view class="input fen-input">
					<picker @change="bindMultiPickerChange" :value="multiIndex" :range="multiArray" range-key="name">
						<view class="uni-input">{{textArray[0]}}</view>
					</picker>
				</view>
			</view>
			<view class="li" v-if="showTwoArray">
				<view class="twoname"></view>
				<view class="input fen-input">
					<picker @change="bindPickerChangeTwo" :value="TwoIndex" :range="TwoArray" range-key="name">
						<view class="uni-input">{{textArray[1]}}</view>
					</picker>
				</view>
			</view>
			<view class="li" v-if="showThreeArray">
				<view class="name">款式:</view>
				<view class="input fen-input">
					<picker @change="bindPickerChangeThree" :value="ThreeIndex" :range="ThreeArray" range-key="name">
						<view class="uni-input">{{textArray[2]}}</view>
					</picker>
				</view>
			</view>
			<view class="li">
				<view class="name">购物人ID:</view>
				<view class="input">
					<input class="uni-input" type="text" v-model="buyer_id" placeholder="请填写购物人ID,选填" />
				</view>
			</view>
			<view class="li_textarea">
				<view class="name">备注:</view>
				<textarea v-model="description" placeholder="备注" />
			</view>
			<button class="sure-btn" @tap="submit">提交</button>
			<view style="width: 100%;height: 50rpx;"></view>
			<!-- <view class="bot-text">定制产品提交订单后会在10个工作日内发货</view> -->
		</view>
		<Loading v-if="isShowLoading"></Loading>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				imageList: [],
				countPhoto: 5,
				isShowLoading: false,
				TwoArray: [],
				ThreeArray: [],
				ThreeIndex: 0,
				TwoIndex: 0,
				multiArray: [],
				multiIndex: 0,
				showTwoArray: false,
				showThreeArray: false,
				textArray:["请选择","请选择","请选择"],
				cate_id:0,
				userData: [],
				goods_name:'',
				num:1,
				goods_price:'',
				description:'',
				weight:'',
				buyer_id:''
			}
		},
		onShow() {
			this.showTwoArray = this.showThreeArray = false,
			this.textArray = ["请选择","请选择","请选择"]	
			this.imageList = []
			this.ThreeIndex = this.TwoIndex = this.cate_id = this.multiIndex = 0
			this.num = 1
			this.goods_name = this.description = this.goods_price = this.weight = ''
		},
		onLoad() {
			let that = this;
			that.isShowLoading = true;
			jewel.get('member/getInfo', {}, false, function(res){
				that.isShowLoading = false;
				let resdata = res.data;
				if(resdata.code == '0') {
					that.userData = resdata.data;
				}
			})
		},
		methods: {
			submit: async function (){
				let that = this
				if(that.goods_name == '') return jewel.showToast('请填写商品名称', 1500);
				if(that.num == '') return jewel.showToast('请填写购买数量', 1500);
				if(that.goods_price == '') return jewel.showToast('请填写价格', 1500);
				if(that.cate_id == 0) return jewel.showToast('请选择分类', 1500);
				let data = {
					goods_name: that.goods_name,
					num: that.num,
					goods_price:that.goods_price,
					goods_img: that.getImageList('url'),
					cate_id:that.cate_id,
					description:that.description,
					weight:that.weight,
					member_id:that.buyer_id
				};
				that.isShowLoading = true
				jewel.post('Goods/offline_order', data, true, function (res){
					that.isShowLoading = false
					let resdata = res.data;
					jewel.showToast(resdata.msg,500);
					if(resdata.code == 0){
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/jewel/user/diWy_orderlist?pageType=offline'
							})
						}, 500)
					}
				})
			},
			
			chooseImage: async function() {
				let that = this;
				if (this.imageList.length === that.countPhoto) {
					let isContinue = await this.isFullImg();
					if (!isContinue) {
						return;
					}
				}
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'],
					count: that.countPhoto,
					success: (res) => {
						let filePath = res.tempFilePaths;
						for(let i in filePath){
							uni.uploadFile({
								url: jewel.host + 'Upload/uploadCustom',
								fileType: 'image',
								filePath: filePath[i],
								name: 'photo',
								formData: {'app-key': jewel.app_key,'folder':'offline'},
								success: (uploadFileRes) => {
									let data = uploadFileRes.data;
									data = JSON.parse(data);
									if(data.code == 0) {
										that.imageList = that.imageList.concat({
											'temp': filePath[i],
											'url': data.data.url
										});
									}else{
										jewel.showToast(data.msg, 1500);
									}
								}
							});
						}
					}
				})
			},
			delete_img: function (filePath, index){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该图片吗？',
					success: function (res) {
						if (res.confirm) {
							jewel.get('member/deleteJewelDiyImage', {filePath: filePath}, false, function(res){
								that.imageList.splice(index,1);
							})
						}
					}
				});
			},
			isFullImg: function() {
				let that = this;
				return new Promise((res) => {
					uni.showModal({
						content: "已经有"+ that.countPhoto +"张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			// 获取具体的图片列表
			getImageList: function (key){
				let imageList = this.imageList;
				let urls = [];
				for (let i in imageList) {
					urls = urls.concat(imageList[i][key]);
				}
				return urls;
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				let urls = this.getImageList('temp');
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			bindMultiPickerChange: function(e) {
				uni.hideKeyboard()
				let that = this
				that.multiIndex = e.target.value
				that.textArray[0] = that.multiArray[that.multiIndex].name
				let list = that.multiArray[that.multiIndex].children
				let list_children = list[0].children
				if(list_children){
					that.showTwoArray = true
					that.showThreeArray = true
					that.TwoArray = list
					that.ThreeArray = list_children
					that.textArray[1] = list[0].name
					that.textArray[2] = list_children[0].name
					that.cate_id = list_children[0].id
				}else{
					that.showThreeArray = true
					that.showTwoArray = false
					that.ThreeArray = list
					that.textArray[2] = list[0].name
					that.cate_id = list[0].id
				}
				that.ThreeIndex = 0
			},
			bindPickerChangeTwo: function(e) {
				uni.hideKeyboard()
				let that = this
				let list = that.TwoArray[that.TwoIndex]
				that.TwoIndex = e.target.value
				that.textArray[1] = that.TwoArray[that.TwoIndex].name
				that.ThreeIndex = 0 
				that.ThreeArray = list.children
				that.textArray[2] = list.children[0].name
			},
			bindPickerChangeThree: function(e) {
				uni.hideKeyboard()
				this.ThreeIndex = e.target.value
				this.textArray[2] = this.ThreeArray[this.ThreeIndex].name
				this.cate_id = this.ThreeArray[this.ThreeIndex].id
			}
		},
		onReady() {
			let that = this
			jewel.post('goods/getDiyCategorys', {}, true, function (res){
				that.multiArray = res.data[0]
			})
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) { 
				uni.navigateTo({
					url:'/pages/jewel/user/diWy_orderlist?pageType=offline'
				})
			}
		}
	};
</script>

<style>
	page{
		background-image: url('~@/static/images/jewel/diy_bg.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.banner{
		width: 100%;
		height: 253rpx;
	}
	.banner image{
		width: 100%;
		height: 100%;
	}
	.content{
		padding: 0 43rpx;
	}
	.content .li{
		display: flex;
		align-items: center;
		line-height: 60rpx;
		padding-top: 30rpx;
	}
	.content .name{
		font-size: 34rpx;
		color: #4a4a4a;
		min-width: 76rpx;
	}
	.content .twoname{
		width: 76rpx;
	}
	.content .li .input{
		flex: 1;
		border: 1px solid #b3b3b3;
		margin-left: 20rpx;
		padding: 10rpx 0;
		border-radius: 3px;
	}
	.content .li .input .uni-input{
		color: #666666;
		font-size: 28rpx;
		padding-left: 20rpx;
	}
	.content .li .fen-input{
		padding:0;
	}
	.content .li_textarea{
		display: flex;
		margin-top: 30rpx;
	}
	.content .li_textarea textarea{
		height: 280rpx;
		border: 1px solid #b3b3b3;
		flex: 1;
		border-radius: 10rpx;
		background: #ffffff;
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		margin-left: 20rpx;
	}
	.content .li_textarea .name{
		padding: 10rpx 0;
	}
	.content .li .unit{
		color: #4a4a4a;
		margin-left: 20rpx;
	}
	.sure-btn{
		width: 320rpx;
		line-height: 78rpx;
		color: #ffffff;
		text-align: center;
		border-radius: 50px;
		margin: 0 auto;
		background: #d83030;
		box-shadow:0px 4px 7px rgba(184,38,38,0.94);
		margin-top: 40rpx;
	}
	.bot-text{
		color: #7f7f7f;
		font-size: 26rpx;
		padding: 30rpx 0;
		text-align: center;
	}
	.content .update-img{
		align-items: flex-start;
	}
	.update-img .add-image{
		width: 123rpx;
		height: 123rpx;
		border: 1px solid #e6e6e6;
		border-radius: 5px;
		font-size: 100rpx;
		color: #f2f2f2;
		font-weight: bold;
		text-align: center;
		line-height: 106rpx;
	}
	.update-img .images-content{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		position: relative;
		flex: 1;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.update-img .image-file{
		width: 123rpx;
		height: 123rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		position: relative;
	}
	.close_diy{
		height: 35rpx!important;
		width: 35rpx!important;
		position: absolute;
		right: -5rpx;
		top: -10rpx;
		z-index: 9;
	}
	.image-file image{
		width: 100%;
		height: 100%;
	}
	.update-img .images-list{
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.update-img .images-list-head{
		font-size: 26rpx;
		color: #CCCCCC;
	}
	.update-img .tipes-num{
		position: absolute;
		right: 0;
		top: 0;
		color: #CCCCCC;
		font-size: 26rpx;
	}
	.m-full-loading{
		background: rgba(255,255,255,0);
	}
</style>
